<template>
  <page-meta :page-font-size="baseFontSize + 'rpx'" :root-font-size="baseFontSize + 'rpx'"></page-meta>
  <view class="u-page flex flex-direction">
    <image
      class="bg"
      src="/static/images/xunjianbg.png"
      mode="widthFix"
    ></image>
    <uni-nav-bar
      :border="false"
      backgroundColor="transparent"
      :fixed="true"
      statusBar
      title="巡检看板"
    ></uni-nav-bar>
    <view class="top-wrap">
      <view class="name">
        <text>{{ userInfo.nickname }}，欢迎你！</text>
        <view class="namebg"></view>
      </view>
      <!-- <view class="menu flex align-center justify-between">
				<view @tap="navTo('/pages/xunJianMap/xunJianMap')">
					<view>
						<text>日常巡查</text>
						<uni-icons type="forward" size="10" color="#597EF7"></uni-icons>
					</view>
					<view class="num">{{finishDayTaskObj.finishDayTaskCount||0}}/{{finishDayTaskObj.unFinishDayTaskCount||0}}</view>
				</view>
				<view @tap="navTo('/pages/addForm/xunchafuhe')">
					<view>
						<text>巡查复核</text>
						<uni-icons type="forward" size="10" color="#597EF7"></uni-icons>
					</view>
					<view class="num">{{finishDayTaskObj.finishReviewTaskCount||0}}/{{finishDayTaskObj.unFinishReviewTaskCount||0}}</view>
				</view>
				<view @tap="navTo('/pages/richangxuncha/changxiaoyanghu')">
					<view>
						<text>长效养护</text>
						<uni-icons type="forward" size="10" color="#597EF7"></uni-icons>
					</view>
					<view class="num">24/45</view>
				</view>
			</view> -->
    </view>
    <view class="main flex-sub">
      <view class="menu flex align-center justify-around">
        <view class="menu-item" @tap="navTo('/pages/xunJianMap/xunJianMap')">
          <!-- <uni-badge :offset="[20, 10]" class="uni-badge-left-margin" text="8" absolute="rightBottom" size="small"> -->
          <view class="imgbox"
            ><image src="/static/images/menu/icon1.png" mode="widthFix"></image
          ></view>
          <!-- </uni-badge> -->
          <view>日常巡查</view>
        </view>
        <view class="menu-item" @tap="navTo('/pages/richangxuncha/xunchafuhe')">
          <!-- <uni-badge :offset="[20, 10]" class="uni-badge-left-margin" text="8" absolute="rightBottom" size="small"> -->
          <view class="imgbox"
            ><image src="/static/images/menu/icon2.png" mode="widthFix"></image
          ></view>
          <!-- </uni-badge> -->
          <view>巡查复核</view>
        </view>
        <view class="menu-item" @tap="navTo('/pages/richangxuncha/artificail')">
          <!-- <uni-badge :offset="[20, 10]" class="uni-badge-left-margin" text="8" absolute="rightBottom" size="small"> -->
          <view class="imgbox"
            ><image src="/static/images/menu/icon3.png" mode="widthFix"></image
          ></view>
          <!-- </uni-badge> -->
          <view>人工监测</view>
        </view>
        <view
          class="menu-item"
          @tap="navTo('/pages/richangxuncha/changxiaoyanghu')"
        >
          <!-- <uni-badge :offset="[20, 10]" class="uni-badge-left-margin" text="8" absolute="rightBottom" size="small"> -->
          <view class="imgbox"
            ><image src="/static/images/menu/icon4.png" mode="widthFix"></image
          ></view>
          <!-- </uni-badge> -->
          <view>长效养护</view>
        </view>
        <view class="menu-item" @tap="navTo('/pages/addForm/anjuanshangbao')">
          <!-- <uni-badge :offset="[20, 10]" class="uni-badge-left-margin" text="8" absolute="rightBottom" size="small"> -->
          <view class="imgbox"
            ><image src="/static/images/menu/icon5.png" mode="widthFix"></image
          ></view>
          <!-- </uni-badge> -->
          <view>案卷上报</view>
        </view>
        <view class="menu-item" @tap="stayTuned">
          <!-- <uni-badge :offset="[20, 10]" class="uni-badge-left-margin" text="8" absolute="rightBottom" size="small"> -->
          <view class="imgbox"
            ><image src="/static/images/menu/icon6.png" mode="widthFix"></image
          ></view>
          <!-- </uni-badge> -->
          <view>施工上报</view>
        </view>
      </view>
      <!-- <app-tabs v-model="tabIndex" :tabs="tabs" @change="tabChange"></app-tabs> -->
      <!-- <view class="list">
				<view class="item">
					<template v-if="tabIndex == 0">
						<view>
							<view @tap="navTo(`/pages/addForm/xuanjiandianshangbao`)" v-for="(item, index) in patrolTaskList">
								<view class="flex justify-between align-center">
									<text class="name">{{ item.facilityName }}-{{ item.compName }}</text>
									<uni-icons type="forward" size="16" color="#597EF7"></uni-icons>
								</view>
								<view class="flex justify-between align-end">
									<view class="time">
										<view>{{ item.projectName }}</view>
										<view :class="{ 'text-red': index == 0 }">期望完成时间：{{ dateTranfer(item.expectTime) }}</view>
									</view>
									<view class="btn">任务上报</view>
								</view>
							</view>
							<view style="font-size: 30upx;text-align: center;padding: 40upx 0;color: #999;" v-if="!patrolTaskList.length && !patrolTaskLoading">
								暂无数据
							</view>
						</view>
					</template>
					<template v-else>
						<view>
							<view @tap="navTo(`/pages/richangxuncha/changxiaoyanghuxiaoqing?id=${item.longReportId}&projectName=${item.projectName}&facilityName=${item.facilityName}&compName=${item.compName}&frequencyValue=${item.frequencyValue}`)" v-for="(item, index) in changXiaoList">
								<view class="flex justify-between align-center">
									<text class="name">{{ item.projectName }}</text>
									<uni-icons type="forward" size="16" color="#597EF7"></uni-icons>
								</view>
								<view class="flex justify-between align-end">
									<view class="time">
										<view>{{ item.facilityName }}-{{ item.compName }}</view>
										<view :class="{ 'text-red': index == 0 }">期望完成时间：{{ item.frequencyValue }}</view>
									</view>
									<view class="btn" @tap.stop="goToReportChang(item)">任务上报</view>
								</view>
							</view>
							<view style="font-size: 30upx;text-align: center;padding: 40upx 0;color: #999;" v-if="!changXiaoList.length && !changXiaoLoading">
								暂无数据
							</view>
						</view>
					</template>
				</view>
			</view> -->
    </view>
    <!-- <view class="page-footer"
      ><button
        @tap="navTo('/pages/addForm/anjuanshangbao')"
        class="save-btn cu-btn block bg-blue lg"
      >
        案卷上报
      </button></view
    > -->
  </view>
</template>

<script>
import appTabs from '@/components/app-tabs.vue'
import {
  getChangXiaoListApi,
  getPatrolMobileFinishInfoTaskApi
} from '@/api/system/changxiao.js'
import {getUserProfile} from '@/api/system/user.js'
import {getPatrolTaskListApi} from '@/api/system/home.js'
import moment from 'moment'
export default {
  components: {appTabs},
  data() {
    return {
      tabIndex: 0,
      tabs: [
        {
          name: '巡查复核',
          value: 0
        },
        {
          name: '长效养护',
          value: 1
        }
      ],
      changXiaoList: [],
      changXiaoLoading: true,
      userInfo: {},
      patrolTaskList: [],
      patrolTaskLoading: true,
      finishDayTaskObj: {}
    }
  },
	computed: {
		baseFontSize() {
			return this.$store.getters.fontSize;
		}
	},
  mounted() {
    this.getInfo()
    // this.getChangXiaoList()
    this.getPatrolTaskList()
    this.getPatrolTask()
  },
  methods: {
    stayTuned() {
      // uni.showToast({
      //   title: '敬请期待',
      //   icon: 'error',
      //   duration: 2000
      // })
      // return
      this.navTo('/pages/richangxuncha/shigongshangbao')
    },
    getPatrolTask() {
      getPatrolMobileFinishInfoTaskApi().then((res) => {
        this.finishDayTaskObj = res.data
      })
    },
    dateTranfer(date) {
      return moment(date).format('YYYY-MM-DD HH:mm:ss')
    },
    getPatrolTaskList() {
      this.patrolTaskLoading = true
      getPatrolTaskListApi({
        taskType: 2, // 1-日常巡查，2-巡查复核
        pageNo: 1,
        pageSize: 100
      })
        .then((res) => {
          this.patrolTaskList = res.data.list
        })
        .finally(() => {
          this.patrolTaskLoading = false
        })
    },
    getInfo() {
      getUserProfile().then((res) => {
        this.userInfo = res.data
        uni.setStorageSync('userInfo', res.data)
      })
    },
    goToReportChang(item) {
      this.$tab.navigateTo(
        `/pages/addForm/changxiaoyanghu?id=${item.longReportId}&projectName=${item.projectName}&facilityName=${item.facilityName}&compName=${item.compName}`
      )
    },
    getChangXiaoList() {
      this.changXiaoLoading = true
      getChangXiaoListApi({
        isFinished: 0,
        pageNo: 1,
        pageSize: 10
      })
        .then((res) => {
          this.changXiaoList = res.data.list
        })
        .finally(() => {
          this.changXiaoLoading = false
        })
    },
    tabChange(e) {
      this.tabIndex = e
      if (e == 1) {
        this.getChangXiaoList()
      } else {
        this.getPatrolTaskList()
      }
    },
    navTo(path) {
      path && this.$tab.navigateTo(path)
    }
  }
}
</script>

<style lang="scss">
@import './index.scss';
.u-page {
  height: 100vh;
  position: relative;
  .bg {
    position: absolute;
    top: 0;
    width: 100%;
    left: 0;
  }
}
.top-wrap {
  position: relative;
  padding: 10upx 48upx 50upx;
  z-index: 1;
  .name {
    line-height: 4.8rem;
    color: #597ef7;
    font-size: 3.2rem;
    font-weight: 800;
    margin-bottom: 50upx;
    position: relative;
    .namebg {
      position: absolute;
      left: -14upx;
      bottom: -10upx;
      width: 276upx;
      height: 38upx;
      background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.7) 0%,
        rgba(246, 250, 255, 0) 100%
      );
    }
    text {
      position: relative;
      z-index: 1;
      
    }
  }
  .num {
    line-height: 4.8rem;
    color: #597ef7;
    font-weight: 300;
    font-size: 3.2rem;
    margin-top: 14upx;
  }
  text {
    line-height: 4.8rem;
    font-size: 2.4rem;
    font-weight: 800;
  }
}
.main {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 32upx 32upx 0 0;
  min-height: 0;
  padding-top: 60upx;
  overflow: auto;

  .menu {
    font-size: 2.4rem;
    color: #333;
    text-align: center;
    margin-bottom: 50upx;
    flex-wrap: wrap;
    .imgbox {
      margin-bottom: 6upx;
      image {
        width: 92upx;
        height: 92upx;
      }
    }
  }
  .btn {
    color: #fff;
    width: 160upx;
    height: 48upx;
    background: #597ef7;
    border-radius: 8upx;
    color: #fff;
    line-height: 48upx;
    text-align: center;
  }
}
.menu-item {
  width: 33.33%;
  margin-bottom: 30upx;
}
</style>
